<template>
	<view class="container">
		<!-- 标签栏 -->
		<view class="tab-bar">
			<view class="tab active">图生视频</view>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<view class="video-link">
				<!-- 按钮触发复制链接并提示用户在浏览器中打开 -->
				<button @tap="copyLink">点击复制链接，在浏览器中打开</button>
			</view>
		</view>

		<!-- 上传区域 -->
		<view class="upload-section">
			<view class="upload-box">
				<view class="upload-item">
					<text class="upload-text">上传图片</text>
					<text class="history-text">或从历史创作选择</text>
				</view>
				<!-- 其他上传项 -->
			</view>
		</view>

		<!-- 输入区域 -->
		<view class="input-section">
			<input v-model="prompt" class="prompt-input" placeholder="请输入提示词" />
			<button class="generate-button" @click="handleGenerate">立即生成</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { getVideo } from '../../api/AiCat';

const prompt = ref("");
const videoSrc = ref("");

const handleGenerate = () => {
  console.log('提示词:', prompt.value);
  getVideo({ prompt: prompt.value }).then(data => {
    console.log(data);
    videoSrc.value = data;
  }).catch(error => {
    console.error(error);
  });
};

const copyLink = () => {
  wx.setClipboardData({
    data: videoSrc.value,
    success: () => {
      wx.showToast({
        title: '链接已复制，请在浏览器中打开',
        icon: 'success'
      });
    },
    fail: (err) => {
      wx.showToast({
        title: '复制失败',
        icon: 'none'
      });
      console.error('复制链接失败:', err);
    }
  });
};
</script>
<style>
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	background: linear-gradient(135deg, #4a90e2, #9013fe);
	min-height: 100vh;
}

.tab-bar {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: 20px;
}

.tab {
	padding: 10px;
	font-size: 18px;
	color: white;
	border-bottom: 2px solid transparent;
}

.active {
	border-bottom: 2px solid #fff;
}

.content {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.video-link {
	text-align: center;
	font-size: 16px;
	color: #2575fc;
}

.upload-section {
	width: 100%;
	margin-bottom: 20px;
}

.upload-box {
	display: flex;
	justify-content: space-between;
}

.upload-item {
	width: 45%;
	height: 100px;
	border: 1px dashed #ccc;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 5px;
}

.upload-text,
.history-text {
	font-size: 14px;
	color: #2575fc;
}

.input-section {
	width: 100%;
	background-color: rgba(255, 255, 255, 0.9);
	padding: 10px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 0;
}

.prompt-input {
	flex: 1;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 16px;
	margin-right: 10px;
}

.generate-button {
	padding: 8px 16px;
	background-color: #2575fc;
	color: white;
	text-align: center;
	border-radius: 5px;
	font-size: 14px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
</style>